<script setup>
import { ref, h } from 'vue'
import { InformationCircle, CloudUpload, Cog, DocumentText, HelpCircle, Eye, Download, Play } from '@vicons/ionicons5'

const activeSection = ref('overview')

const sections = [
  {
    key: 'overview',
    title: '系统概述',
    icon: InformationCircle
  },
  {
    key: 'file-upload',
    title: '文件上传',
    icon: CloudUpload
  },
  {
    key: 'file-processing',
    title: '文件处理',
    icon: Cog
  },
  {
    key: 'faq',
    title: '常见问题',
    icon: HelpCircle
  }
]
</script>

<template>
  <div class="user-guide">
    <n-card title="使用说明" :bordered="false" class="guide-card">
      <template #header-extra>
        <n-tag type="info" size="small">用户指南</n-tag>
      </template>
      
      <n-layout has-sider>
        <n-layout-sider 
          :width="240" 
          :native-scrollbar="false"
          content-style="padding: 16px 0;"
        >
          <n-menu
            v-model:value="activeSection"
            :options="sections.map(s => ({
              key: s.key,
              label: s.title,
              icon: () => h('n-icon', null, { default: () => h(s.icon) })
            }))"
          />
        </n-layout-sider>
        
        <n-layout-content content-style="padding: 24px 48px;">
          <!-- 系统概述 -->
          <div v-if="activeSection === 'overview'" class="guide-section">
            <h2>系统概述</h2>
            <h3>主要功能</h3>
            <n-ul>
              <n-li>支持多种文件格式上传（PDF、Word、Excel、图片等）</n-li>
              <n-li>自动将文件转换为PDF格式</n-li>
              <n-li>获取GPO中相应的 DFF 字段信息</n-li>
              <n-li>调用大模型API进行DFF字段识别</n-li>
              <n-li>调用GPO API，将识别结果写入GPO</n-li>
            </n-ul>
          </div>
          
          <!-- 文件上传 -->
          <div v-else-if="activeSection === 'file-upload'" class="guide-section">
            <h2>文件上传</h2>
            
            <h3>支持的文件格式</h3>
            <n-grid :cols="2" :x-gap="16" :y-gap="16">
              <n-grid-item>
                <n-card size="small" title="文档类型">
                  <n-ul>
                    <n-li>PDF (.pdf)</n-li>
                    <n-li>Word (.doc, .docx)</n-li>
                    <n-li>Excel (.xls, .xlsx)</n-li>
                    <n-li>PowerPoint (.ppt, .pptx)</n-li>
                  </n-ul>
                </n-card>
              </n-grid-item>
              <n-grid-item>
                <n-card size="small" title="图片类型">
                  <n-ul>
                    <n-li>JPEG (.jpg, .jpeg)</n-li>
                    <n-li>PNG (.png)</n-li>
                    <n-li>GIF (.gif)</n-li>
                    <n-li>BMP (.bmp)</n-li>
                  </n-ul>
                </n-card>
              </n-grid-item>
            </n-grid>
            
            <h3>上传方式</h3>
            <n-steps vertical>
              <n-step title="拖拽上传">
                <div>将文件直接拖拽到上传区域</div>
              </n-step>
              <n-step title="点击上传">
                <div>点击上传区域选择文件</div>
              </n-step>
              <n-step title="批量上传">
                <div>支持同时选择多个文件进行批量上传</div>
              </n-step>
            </n-steps>
            
            <n-alert type="warning" style="margin-top: 16px;">
              <strong>注意事项：</strong>
              <n-ul style="margin-top: 8px;">
                <n-li>单个文件大小不超过50MB</n-li>
                <n-li>文件名不能包含特殊字符</n-li>
                <n-li>建议使用英文文件名</n-li>
              </n-ul>
            </n-alert>
          </div>
          
          <!-- 文件处理 -->
          <div v-else-if="activeSection === 'file-processing'" class="guide-section">
            <h2>文件处理</h2>
            
            <h3>功能说明</h3>
            <n-space vertical>
              <n-card size="small">
                <template #header>
                  <n-space align="center">
                    <n-tag type="info" size="small">文件处理</n-tag>
                  </n-space>
                </template>
                非PDF文件将自动转换为PDF格式，所有PDF文件将被处理为仅包含指定页数的版本
              </n-card>
              
              <n-card size="small">
                <template #header>
                  <n-space align="center">
                    <n-tag type="success" size="small">GPO集成</n-tag>
                  </n-space>
                </template>
                系统会自动识别TRF文件名格式，查询对应的GPO Order或Enquiry信息，并获取相关的DFF数据
              </n-card>
              
              <n-card size="small">
                <template #header>
                  <n-space align="center">
                    <n-tag type="warning" size="small">文件下载</n-tag>
                  </n-space>
                </template>
                处理完成后可直接下载PDF文件，支持批量下载和CSV格式的DFF数据导出
              </n-card>
              
              <n-card size="small">
                <template #header>
                  <n-space align="center">
                    <n-tag type="error" size="small">TRF API</n-tag>
                  </n-space>
                </template>
                可以将生成的CSV文件通过大模型API发送处理，结合PDF文件内容解析DFF字段并返回识别结果
              </n-card>
            </n-space>
            
            <h3>使用限制</h3>
            <n-alert type="warning" style="margin: 16px 0;">
              <strong>重要限制：</strong>
              <n-ul style="margin-top: 8px;">
                <n-li><strong>文件大小：</strong>单个文件大小限制为50MB</n-li>
                <n-li><strong>文件数量：</strong>最多可同时上传10个文件</n-li>
                <n-li><strong>文件命名：</strong>使用标准的 Order No 或 Enquiry No 命名文件，以便系统自动识别并获取对应的GPO信息</n-li>
              </n-ul>
            </n-alert>
            
            <h3>处理流程</h3>
            <n-timeline>
              <n-timeline-item type="success" title="文件转换">
                非PDF文件自动转换为PDF格式
              </n-timeline-item>
              <n-timeline-item type="info" title="页数处理">
                根据设置的页数截取PDF内容
              </n-timeline-item>
              <n-timeline-item type="warning" title="GPO查询">
                根据文件名查询对应的GPO Order/Enquiry信息
              </n-timeline-item>
              <n-timeline-item type="error" title="DFF数据">
                获取并整合相关的DFF数据
              </n-timeline-item>
            </n-timeline>
          </div>
          
          <!-- 常见问题 -->
          <div v-else-if="activeSection === 'faq'" class="guide-section">
            <h2>常见问题</h2>
            
            <n-collapse>
              <n-collapse-item title="文件上传失败怎么办？" name="1">
                <n-ul>
                  <n-li>检查文件格式是否支持</n-li>
                  <n-li>确认文件大小不超过限制</n-li>
                  <n-li>检查网络连接是否正常</n-li>
                  <n-li>尝试刷新页面后重新上传</n-li>
                </n-ul>
              </n-collapse-item>
              
              <n-collapse-item title="为什么处理时间很长？" name="2">
                <n-ul>
                  <n-li>大文件需要更长的处理时间</n-li>
                  <n-li>复杂的文档结构会增加处理时间</n-li>
                  <n-li>服务器负载可能影响处理速度</n-li>
                  <n-li>请耐心等待，避免重复提交</n-li>
                </n-ul>
              </n-collapse-item>
              
              <n-collapse-item title="DFF信息提取不准确？" name="3">
                <n-ul>
                  <n-li>确保原始文档格式规范</n-li>
                  <n-li>检查文档中的表格和字段是否清晰</n-li>
                  <n-li>可以尝试重新上传处理</n-li>
                  <n-li>联系管理员进行人工检查</n-li>
                </n-ul>
              </n-collapse-item>
              
              <n-collapse-item title="如何联系技术支持？" name="4">
                <n-ul>
                  <n-li>通过系统内的反馈功能</n-li>
                  <n-li>发送邮件到技术支持邮箱</n-li>
                  <n-li>联系系统管理员</n-li>
                  <n-li>查看系统公告获取最新信息</n-li>
                </n-ul>
              </n-collapse-item>
            </n-collapse>
          </div>
        </n-layout-content>
      </n-layout>
    </n-card>
  </div>
</template>

<style lang="stylus" scoped>
.user-guide
  .guide-card
    min-height: 250px

    .n-layout
        min-height: 300px
        margin: 0 auto

  .guide-section
    h2
      color: #2080f0
      margin-bottom: 16px
      
    h3
      margin: 24px 0 12px 0
      color: #666
      
    .n-ul
      margin: 8px 0
      
    .n-li
      margin: 4px 0
</style>